<template>
	<header>
		<div>返回</div>
		<div class="search-main">
			<i class="iconfont icon-fangdajing"></i>
			<form action="" onsubmit='return false'>
				<input type="search" placeholder="搜索您喜欢的产品..." @keyup.enter="goSearchList" v-model="searchVal">
			</form>
		</div>
		<div @click="goSearchList"><span>搜索</span></div>
	</header>
</template>

<script>
	export default{
		data(){
			return{
				searchVal:'',
			}
		},
		methods:{
			//进入搜索
			goSearchList(){
				//没有搜索关键字直接返回
				if( !this.searchVal ) return;
				
				//判断用户有没有搜索过
				if( localStorage.getItem('search') ){
					//有
					var storageVal = JSON.parse( localStorage.getItem('search') );
				}else{
					//没有==>创建
					localStorage.setItem('search','[]')
				}
				//变量存值
				storageVal.unshift( this.searchVal );
				console.log('storageVal',storageVal);
				
				let val = Array.from( new Set(storageVal));
				//本地存储存值
				localStorage.setItem('search',JSON.stringify( val ) );
				
				//进入搜索详情页
				this.$router.push({
					name:'list',
					query:{
						key:this.searchVal
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 2.133333rem;
		background: red;
		i{
			font-size: 0.533333rem;
			color: #fff;
		}
		.search-main{
			
			background-color: #fff;
			span{
				font-size: 0.266666rem;
			}
		}
	}
</style>
